<template>
  <a-drawer :title="title" width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="cancel">
    <!-- <a-divider orientation="left">
      <b>{{ title }}</b>
    </a-divider> -->
    <a-form-model ref="form" layout="horizontal" :model="form" :rules="rules" style="padding-bottom:10px;">
      <a-form-model-item label="菜单类型" prop="menuType">
        <a-radio-group v-model="form.menuType" button-style="solid">
          <a-radio-button value="M">目录</a-radio-button>
          <a-radio-button value="C">菜单</a-radio-button>
          <a-radio-button value="F">权限</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="上级菜单" prop="parentId" v-if="form.menuType === 'C'">
        <a-tree-select
          v-model="form.parentId"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="menuOptions"
          placeholder="请选择"
          :replaceFields="{children:'children', title:'title', key:'id', value: 'id' }"
          tree-default-expand-all
        >
        </a-tree-select>
      </a-form-model-item>
      <a-form-model-item label="菜单标题" prop="title">
        <a-input v-model="form.title" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item prop="path" v-if="form.menuType != 'F'">
        <span slot="label">
          路由地址
          <a-tooltip>
            <template slot="title">
              访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头
            </template>
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-input v-model="form.path" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item prop="component" v-if="form.menuType !== 'F'">
        <span slot="label">
          组件路径
          <a-tooltip>
            <template slot="title">
              访问的组件路径，如：`system/user/index`，默认在`pages`目录下
            </template>
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-input v-model="form.component" placeholder="请输入" />
      </a-form-model-item>
      <a-form-model-item label="图标" prop="icon" v-if="form.menuType != 'F'">
        <a-input placeholder="点击选择图标" v-model="form.icon">
          <a-icon slot="addonAfter" type="setting" @click="selectIcons" />
        </a-input>
      </a-form-model-item>
      <a-form-model-item label="排序" prop="order" v-if="form.menuType !== 'F'">
        <a-input-number v-model="form.order" :min="0" :max="9999" style="width: 100%" />
      </a-form-model-item>
      <a-form-model-item prop="perms" v-if="form.menuType === 'F'">
        <span slot="label">
          权限标识
          <a-tooltip>
            <template slot="title">
              控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)
            </template>
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-input v-model="form.perms" placeholder="请输入" :maxLength="100" />
      </a-form-model-item>
      <a-form-model-item prop="isFrame" v-if="form.menuType != 'F'">
        <span slot="label">
          是否外链
          <a-tooltip>
            <template slot="title">
              选择是外链则路由地址需要以`http(s)://`开头
            </template>
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-radio-group v-model="form.isFrame" button-style="solid">
          <a-radio-button :value="true">是</a-radio-button>
          <a-radio-button :value="false">否</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item prop="visible" v-if="form.menuType != 'F'">
        <span slot="label">
          是否显示
          <a-tooltip>
            <template slot="title">
              选择隐藏则路由将不会出现在侧边栏，但仍然可以访问
            </template>
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-radio-group v-model="form.navigable" button-style="solid">
          <a-radio-button :value="true">是</a-radio-button>
          <a-radio-button :value="false">否</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item prop="keepAlive" v-if="form.menuType == 'C'">
        <span slot="label">
          是否缓存
          <a-tooltip>
            <template slot="title">
              选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致，仅在多页签下有效。
            </template>
            <a-icon type="question-circle-o" />
          </a-tooltip>
        </span>
        <a-radio-group v-model="form.keepAlive" button-style="solid">
          <a-radio-button :value="true">是</a-radio-button>
          <a-radio-button :value="false">否</a-radio-button>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
    <div class="bottom-control">
      <a-space>
        <a-button type="primary" @click="submitForm" :loading="confirmLoading">保存</a-button>
        <a-button type="dashed" @click="cancel"> 取消</a-button>
      </a-space>
    </div>
    <!-- 选择图标 -->
    <icons ref="icons" @choose="handleIconChoose"></icons>
  </a-drawer>
</template>

<script>

import { addMenu, editMenu } from '@/services/system'
import Icons from './icon/Icons'
import { TreeSelect as ATreeSelect } from 'ant-design-vue'
export default {
  name: 'MenuModal',
  components: {
    Icons,
    ATreeSelect
  },
  props: {
    menuOptions: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      confirmLoading: false,
      title: '',
      form: {
        icon: ''
      }, // 表单参数
      open: false,
      rules: {
        title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
        component: [{ required: true, message: '组件路径不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // onClose() {
    //   this.open = false
    // },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {}
      this.$refs.form.resetFields()
    },
    /** 新增按钮操作 */
    add(row) {
      const defaultData = {
        order: 1,
        navigable: true,
        isFrame: false,
        menuType: 'M',
        keepAlive: false
      }
      if (row != null && row.id) {
        defaultData.parentId = row.id
        defaultData.menuType = 'C'
      } else {
        defaultData.parentId = ''
      }
      this.open = true
      this.edit(defaultData)
    },
    /** 修改按钮操作 */
    edit(data) {
      this.open = true
      this.form = data
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          this.form.name = this.form.path
          if (this.form.id !== undefined) {
            editMenu(this.form).then(() => {
              this.$message.success('修改成功', 3)
              this.cancel()
              this.$emit('ok')
            }).finally(() => {
              this.confirmLoading = false
            })
          } else {
            addMenu(this.form).then(() => {
              this.$message.success('新增成功', 3)
              this.cancel()
              this.$emit('ok')
            }).finally(() => {
              this.confirmLoading = false
            })
          }
        } else {
          return false
        }
      })
    },
    selectIcons() {
      this.$refs.icons.iconChooseVisible = true
    },
    handleIconChoose(icon) {
      this.$set(this.form, 'icon', icon)
      // this.form.icon = icon
    }
  }
}
</script>
<style scoped>
.bottom-control{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding: 10px 16px;
  background: #fff;
  text-align: right;
  z-index: 1;
}
</style>
